<?php
// 初始化日本将棋棋盘
function initShogiBoard() {
    $board = [];
    // 棋盘为 9x9
    for ($i = 0; $i < 9; $i++) {
        $board[$i] = array_fill(0, 9, '');
    }

    // 先手方棋子初始布局
    $board[0] = ['香車', '桂馬', '銀将', '金将', '王将', '金将', '銀将', '桂馬', '香車'];
    $board[1][1] = '角行';
    $board[1][7] = '飛車';
    for ($i = 0; $i < 9; $i++) {
        $board[2][$i] = '歩兵';
    }

    // 后手方棋子初始布局
    $board[8] = ['香車', '桂馬', '銀将', '金将', '玉将', '金将', '銀将', '桂馬', '香車'];
    $board[7][1] = '角行';
    $board[7][7] = '飛車';
    for ($i = 0; $i < 9; $i++) {
        $board[6][$i] = '歩兵';
    }

    return $board;
}

$board = initShogiBoard();
?>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日本将棋网页游戏</title>
    <style>
        body {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <h1>日本将棋网页游戏</h1>
    <table id="shogi-board">
        <?php
        for ($i = 0; $i < 9; $i++) {
            echo '<tr>';
            for ($j = 0; $j < 9; $j++) {
                echo '<td data-row="' . $i . '" data-col="' . $j . '">';
                echo $board[$i][$j];
                echo '</td>';
            }
            echo '</tr>';
        }
        ?>
    </table>

    <script>
        const board = document.getElementById('shogi-board');
        let selectedPiece = null;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD') {
                const cell = event.target;
                if (selectedPiece === null) {
                    if (cell.textContent!== '') {
                        selectedPiece = cell;
                        cell.style.backgroundColor = 'yellow';
                    }
                } else {
                    const fromRow = parseInt(selectedPiece.dataset.row);
                    const fromCol = parseInt(selectedPiece.dataset.col);
                    const toRow = parseInt(cell.dataset.row);
                    const toCol = parseInt(cell.dataset.col);

                    // 简单落子逻辑（未实现规则判断）
                    cell.textContent = selectedPiece.textContent;
                    selectedPiece.textContent = '';
                    selectedPiece.style.backgroundColor = '';
                    selectedPiece = null;

                    // 这里可添加更多逻辑，如检查落子是否符合规则等
                }
            }
        });
    </script>
</body>

</html>